<script>
  const { ipcRenderer } = require("electron");
  import {
    manualDownloadFileData,
    manualDownloadGroup,
    eventObject
  } from "../../stores.mjs";

  let downloadedFile;
  let checkingFile = false;

  function handleManualDownloadButton() {
    checkingFile = true;
    ipcRenderer.once("user:manual_download:check", (event, ok) => {
      checkingFile = false;
    });

    $eventObject.sender.send(
      "manual_download:completed",
      downloadedFile[0].path
    );
  }
</script>

<div class="row">
  <div class="col-6">
    <img
      src="./screens/Screen6.jpg"
      alt="Screen6"
      style="height: 350px; margin: auto; display: block;"
    />
  </div>
  <div class="col-6">
    <h4 style="font-weight: bold;">Manual Download</h4>
    <p>
      The <b>{$manualDownloadGroup}</b> file
      <b>{$manualDownloadFileData.name}</b> needs to be manually downloaded due to
      licensing restrictions. Sorry for the inconvenience!
    </p>
    <p>
      Please download the file <b>{$manualDownloadFileData.name}</b> from
      <a href={$manualDownloadFileData.url}>{$manualDownloadFileData.url}</a>.
    </p>
    <p>
      Once you have it, select it in the file picker and click the button below
      to continue.
    </p>
    <div class="input-group" style="margin-bottom: 1em;">
      <div class="custom-file">
        <input
          type="file"
          bind:files={downloadedFile}
          disabled={checkingFile}
        />
      </div>
    </div>
    <button
      id="manual-download-button"
      class="btn btn-primary"
      disabled={!downloadedFile || checkingFile}
      on:click={() => handleManualDownloadButton()}
    >
      {#if checkingFile}
        Checking file...
      {:else}
        Continue
      {/if}
    </button>
  </div>
</div>
